<template>
  <div class="home-container" id="test">
    <h1>首页</h1>
    <span ref="title">{{count}}</span>
    <button @click="count++">count+1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      banners: [],
      count: 0,
    }
  },
  beforeCreate() {  //在vue 实例创建之后，注入之前运行 
  console.log("beforeCreate",this.banners)
  },
  created() {       //在 vue的注入之后，生成VNode之前
    console.log("created", this.banners)
  },
  beforeMount() {   //在vue的生成虚拟节点之后，生成真实节点之前  获取不到真实节点
    console.log("beforeMount", document.getElementById("test"))
  },
  mounted() {       //在生成真实节点之后，挂载之前 可以获取得到真实节点  这里也可以拿到ref了
    console.log("mounted", document.getElementById("test"))
  },
  //数据开始发生变化 页面重新渲染
  beforeUpdate() {
    console.log("beforeUpdate", "数据发生变化 对比新旧Dom 开始渲染Dom",this.$refs.title.innerText,this.count,"这里获取还未改变的数据 还有改变完的数据");
  },
  updated() {
    console.log("updated","DOM渲染完毕 生成新的虚拟Dom节点", this.$refs.title.innerText,this.count,"这里获取的是最新的数据 也就是改变过的数据");
  },

  beforeDestroy() {
    console.log("beforeDestroy：在销毁组件之前");
  },
  destroyed() {
    console.log("destroyed：在销毁组件之后");
  }
};
</script>

<style scoped>
.home-container {
  color: initial;
}
</style>
